import { useEffect, useState } from "react";

// 需求：在组件渲染完毕后获取频道数据并渲染
const URL = "http://geek.itheima.net/v1_0/channels";

function App() {
  // 频道列表
  const [list, setList] = useState([]);
  useEffect(() => {
    // 额外的操作 获取频道列表
    async function getList() {
      const res = await fetch(URL);
      const jsonRes = await res.json();
      // 存储频道列表
      setList(jsonRes.data.channels);
    }
    getList();
  }, []);
  return (
    <>
      <div>this is App component</div>
      {/* 渲染频道列表 */}
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

export default App;
